//先引入gulp包
const gulp = require('gulp')
//引入html打包任务
const htmlMin = require('gulp-htmlmin')
//引入css打包任务
const cssMin = require('gulp-cssmin')
//引入sass转换任务
const sass = require( 'gulp-sass' ) ( require ( 'sass' ) )
//引入js打包任务
const uglify = require('gulp-uglify')
//引入ES6转ES5打包任务
const babel = require('gulp-babel')
//引入清除任务
const del = require('del')
//引入服务器任务
const server = require('gulp-webserver')

//html任务配置
const htmlHandler = ()=>{
    //找到src目录的要打包的文件
    return gulp.src('./src/**/*.html')
    //管道函数，通过这个方法处理咱们的任务
    .pipe(htmlMin({
          removeComments: true,//清除HTML注释
          collapseWhitespace: true,//压缩HTML
          collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input 		checked />
          removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
          //removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
          removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
          minifyJS: true,//压缩页面JS
          minifyCSS: true//压缩页面CSS 
    }))
    .pipe(gulp.dest('./dist'))
}
//sass转换成css任务和css压缩
const cssHandler = ()=>{
    return gulp.src('./src/sass/**/*.scss')
    //把sass先转成css
    .pipe(sass())
    //颜色css
    .pipe(cssMin())
    //把css最终输出在dist目录下
    .pipe(gulp.dest('./dist/css'))
}
//js任务配置
const jsHandler = ()=>{
    return gulp.src('./src/js/**')
    //先把ES6转成ES5代码
    .pipe(babel({
        presets: ['es2015']
    }))
    //再进行压缩处理
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
}
//处理libs和img移动任务
const libsHandler = ()=>{
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const imgHandler = ()=>{
    return gulp.src('./src/img/*')
    .pipe(gulp.dest('./dist/img'))
}
const apiHandler = ()=>{
    return gulp.src('./src/api/*')
    .pipe(gulp.dest('./dist/api'))
}
const fontsHandler = ()=>{
    return gulp.src('./src/fonts/*')
    .pipe(gulp.dest('./dist/fonts'))
}
//清除任务配置
const delHandler = ()=>{
    return del(['./dist'])
}
// 创建一个 webserver 任务
const serverHandler = function () {
    return gulp
        .src('./dist')
        .pipe(server({
            host: 'localhost',          // 配置打开浏览器的域名
            port: 2204,                 // 配置打开浏览器的端口号
            livereload: true,           // 自动刷新浏览器
            open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
        }))
}
// 创建一个 watch 任务
const watchHandler =  function () {
    gulp.watch('./src/sass/**', cssHandler) 
    gulp.watch('./src/js/**', jsHandler)
    gulp.watch('./src/**/*.html', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/api/**', imgHandler)
    gulp.watch('./src/fonts/**', imgHandler)
}

//按顺序执行任务，先执行完毕删除任务，在执行并行任务
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(htmlHandler, cssHandler, jsHandler, libsHandler, imgHandler, apiHandler, fontsHandler),
    serverHandler,
    watchHandler
)